<template>
  <div class="merchant-page">
    <v-title title="线下商家" />
    <type :merchant="merchant" :current="currentType" @selectType="selectType" class="type" />
    <list :list="list" class="list" />
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
    <register />
    <loading :show="loading" />
    <top />
  </div>
</template>

<script>
import Title from '@/components/Title'
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import Type from './components/Type'
import List from './components/List'
import Register from './components/Register'
import Top from '@/components/Top'
import PullUp from '@/components/PullUp'
export default {
  name: 'Merchant',
  components: {
    'v-title': Title,
    Loading,
    Type,
    List,
    Register,
    Top,
    PullUp
  },
  data() {
    return {
      currentType: 0,
      merchant: {},
      loading: false,
      list: [],
      queryList: {},
      type: -1
    }
  },
  methods: {
    /**
     * get uni merchant data (type)
     * 1) vuex
     * 2) localstorage
     * 3) redis
     * 4) db
     */
    fetchData() {
      // first list
      const firstList = () => {
        if (this.merchant.type && this.merchant.type.length > 0) {
          this.init()
          this.type = this.merchant.type[0].id
          this.currentType = 0
          this.getList()
        }
      }
      const data = this.$store.getters['Merchant/merchant']
      if (data === null) {
        this.loading = true
        api.Uni.merchantPage().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Merchant/set_data', data).then(() => {
            this.merchant = data
            firstList()
          })
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.merchant = data
        firstList()
      }
    },
    selectType(type) {
      this.init()
      this.type = type[0]
      this.currentType = type[1]
      this.getList()
    },
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Merchant.list({ type: this.type, ...this.queryList }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    }
  },
  created () {
    this.init()
    this.fetchData()
  },
  activated () {
    // this.init()
    // this.fetchData()
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.merchant-page
  padding-top 45px
  background $background_color
  //.type
  //  position fixed
  //  width calc(100% - 20px)
  //  left 0
  //  top 45px
  //  background white
  //.list
  //  margin-top 300px
</style>
